<template>
  <div class="page-container">
    <!-- 搜索栏 -->
    <div class="search-container">
      <el-form :model="searchParams" inline size="medium">
        <el-form-item label="员工姓名:" prop="name">
          <el-input v-model="searchParams.name" placeholder="请输入员工姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearchEmployee">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加员工按钮 -->
    <div class="add-employee">
      <el-button v-auth-btn="'sys:user:add_edit'" type="primary" size="medium" @click="onOpenEmployeeEditor({})">添加员工</el-button>
    </div>
    <!-- 员工数据列表 -->
    <el-table :data="employeeList" :header-cell-style="{ background: '#f7f8f9' }" size="medium">
      <!-- 序号 -->
      <el-table-column label="序号" type="index" width="60" />
      <!-- 员工姓名 -->
      <el-table-column label="员工姓名" prop="name" />
      <!-- 登录账号 -->
      <el-table-column label="登录账号" prop="userName" />
      <!-- 联系方式 -->
      <el-table-column label="联系方式" prop="phonenumber" />
      <!-- 角色 -->
      <el-table-column label="角色" prop="roleName" />
      <!-- 状态 -->
      <el-table-column label="状态" width="100">
        <template #default="{ row }">
          {{ row.status ? '启用' : '未启用' }}
        </template>
      </el-table-column>
      <!-- 添加时间 -->
      <el-table-column label="添加时间" prop="createTime" />
      <!-- 操作 -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button v-auth-btn="'sys:user:add_edit'" type="text" @click="onOpenEmployeeEditor(row)">编辑</el-button>
          <el-button v-auth-btn="'sys:user:remove'" type="text" @click="onDeleteEmployee(row.id)">删除</el-button>
          <el-button v-auth-btn="'sys:user:resetPwd'" type="text" @click="onResetPwd(row.id)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      :current-page.sync="searchParams.page"
      :page-size="10"
      layout="->, total, prev, pager, next"
      :total="total"
      @current-change="getEmployeeList"
    />
    <!-- 添加员工弹窗 -->
    <EmployeeEditor ref="employeeEditorRef" @update-list="getEmployeeList" />
  </div>
</template>

<script>
import { getEmployeeListAPI, deleteEmployeeAPI, resetPwdAPI } from '@/api/system/employee'

import EmployeeEditor from './components/EmployeeEditor'

export default {
  name: 'Building',
  components: {
    EmployeeEditor
  },
  data() {
    return {
      // 查询参数
      searchParams: {
        page: 1,
        pageSize: 10,
        name: '' // 员工姓名
      },
      // 员工列表
      employeeList: [],
      // 员工列表数据总条数
      total: 0
    }
  },
  created() {
    // 获取员工列表
    this.getEmployeeList()
  },
  methods: {
    // 获取员工列表
    async getEmployeeList() {
      const res = await getEmployeeListAPI(this.searchParams)
      this.employeeList = res.rows
      this.total = res.total
    },
    // 获取员工列表第一页
    onSearchEmployee() {
      this.searchParams.page = 1
      this.getEmployeeList()
    },
    // 删除员工
    onDeleteEmployee(id) {
      this.$confirm('您确定删除该员工吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteEmployeeAPI(id)
        this.$message.success('删除成功')
        // 刷新员工列表
        this.getEmployeeList()
      }).catch(() => {
        // console.log('已取消删除')
      })
    },
    // 重置密码
    async onResetPwd(id) {
      this.$confirm('您确定将该员工的密码重置为 "<strong>123456</strong>" 吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(async() => {
        await resetPwdAPI(id)
        this.$message.success('重置密码成功')
      }).catch(() => {
        // console.log('已取消重置密码')
      })
    },
    // 打开添加员工弹窗
    onOpenEmployeeEditor(row) {
      this.$refs.employeeEditorRef.open(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .search-container {
    border-bottom: 1px solid #eee;
    .el-form {
      .el-form-item {
        margin-right: 40px;
      }
    }
  }
  .add-employee {
    margin-top: 25px;
  }
  ::v-deep .el-table {
    margin: 25px 0;
    .el-icon-plus {
      border: 1px solid #eee;
    }
    .el-table__cell {
      padding: 5px 0;
    }
  }
}
</style>
